<template>
  <tm-app>
    <TabBarPageWrapper :use-custom-nav-bar="false">
        <view class="header">
          <!-- 轮播图区域 -->
          <swiper class="swiper" style="height: 250px;" :indicator-dots="true" :autoplay="true" circular
                  :interval="3000" :duration="1000">
            <swiper-item style="height: 250px;" v-for="item in swiperList" :key="item.id">
              <image style="height: 250px;" :src="item.imageUrl" mode=""></image>
            </swiper-item>
          </swiper>
        </view>
        <!--  公告-->
        <!--        <view class="disa">-->
        <!--          &lt;!&ndash; <view class="disj" @click="inform_details(lists.noticeId)"> &ndash;&gt;-->
        <!--          <view class="disj" @click="navRouter(`/pages/tabbar/work/inform_details?id=${lists.noticeId}`)">-->
        <!--            <image class="bulletin" src="@/static/image/work/notices.png" mode=""></image>-->
        <!--            <view class="ml10 w80">{{ lists.noticeTitle }}</view>-->
        <!--          </view>-->
        <!--          <image @click="navRouter(`/pages/tabbar/work/inform_list`)" style="width: 10px;height: 13px;"-->
        <!--                 src="@/static/image/work/details.png" mode=""></image>-->

        <!--        </view>-->
        <view class="flexWarp w100 color32">
          <view class="borde_r_cs flexWarp juCen" @click="handlegrids(item.url)" v-for="(item,index) in gridList"
                :key="index">
            <image :src="item.icon" mode=""></image>
            <view class="f14">{{ item.value }}</view>
          </view>
        </view>
    </TabBarPageWrapper>
  </tm-app>
</template>

<script setup lang="ts">
import TabBarPageWrapper from '@/components/TabBarPageWrapper/index.vue';
import {ref} from 'vue';

const swiperList = ref([
  {
    id: 0,
    imageUrl: "../../static/image/work/carousel.png",
  }

]);
const gridList = ref([
  {
    id: 0,
    icon: "../../static/image/work/maintain.png",
    value: "保养",
    url: "/pages/gird/toMaintain/toMaintain"
  },
  {
    id: 1,
    icon: "../../static/image/work/service.png",
    value: "维修",
    url: "/pages/gird/awaiting/awaiting?isOverhaul=1"
  },
  {
    id: 2,
    icon: "../../static/image/work/annual.png",
    value: "年检",
    url: "/pages/gird/yearlyInspection/index"
  },
  {
    id: 3,
    icon: "../../static/image/work/livePlay.png",
    value: "监控",
    url: "/pages/tabbar/polling/searchResult/searchResult?type=3"
  },
  // {
  //   id: 3,
  //   icon: "../../static/image/work/polling.png",
  //   value: "巡检",
  //   url: "/pages/tabbar/polling/polling"
  // },
  // {
  //   id: 4,
  //   icon: "../../static/image/work/fault.png",
  //   value: "故障码",
  //   url: "/pages/gird/faultCode/faultCode"
  // },
  // {
  //   id: 7,
  //   icon: "../../static/image/work/overhaul.png",
  //   value: "大修",
  //   url: "/pages/gird/awaiting/awaiting?isOverhaul=0"
  // },
]);

function handlegrids(url: string) {
  uni.navigateTo({url: url});
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.flexWarp {
  display: flex;
  flex-wrap: wrap;
}

.borde_r_cs {
  width: 30%;
  margin: 20px 1.6%;
  flex-direction: column;
  align-items: center;
}

.borde_r_cs > image {
  width: 50px;
  height: 50px;
}

page {
  background: #FFFFFF;
  width: 100%;
  margin-bottom: 88rpx;
}

view {
  font-size: 28rpx;
  line-height: 1.8;

}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 9999;
}

.header {
  width: 750rpx;
}

.header image {
  width: 100%;
  height: 400rpx;
  vertical-align: top;
}

/* 宫格 */
.gird {
  width: 750rpx;
  /* height: 400rpx; */
  margin: 0 auto;
  border: none;
  background-color: #EBEBEB;
}

.grid-text text {
  line-height: 2.8;
}

.grid-text image {
  width: 88rpx;
  height: 88rpx;
  box-shadow: 0px 10px 10px 0px rgba(255, 138, 152, 0.1);
  vertical-align: middle;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;

}

.grid-text text {
  display: block;
  font-size: 24rpx;
  text-align: center;
}

/* 咨询列表 */
.new-content {
  /* width: 670rpx;
  margin: 0 auto; */
}

.uni-list-item {
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #34363D;

}

.new-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1rpx solid #E0E1EA;
  top: 0;
  padding: 30rpx 0;
}

.mew-list image {
  width: 100rpx;
  height: 131rpx;
  background: #989DBB;
  border-radius: 6px;
  vertical-align: middle;
}

.list-left-text {
  font-size: 33rpx;
  color: #34363D;
  font-weight: bold;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.list-left-time {
  font-size: 25rpx;
  color: #989BA6;
}

.lsit-right image {
  margin-left: 35rpx;
  width: 233rpx;
  height: 151rpx;
  border-radius: 6px;
  vertical-align: middle;
}

.disa {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #F9F9F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.disj {
  width: 90%;
  display: flex;
  align-items: center;
}

.bulletin {
  width: 40px;
  height: 30px;
}

.ml10 {
  margin-left: 10px;
}

.w80 {
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
